<template>
  <div>
    <div
              class="pd-10"
              v-for="item in tableData"
              :key="item.expand.path">
        <div class="top">
          <span>{{item.expand.title}} <i class="iconfont icon-paihang"></i> </span>
          <em @click="$router.push(item.expand.path)">查看排行榜 <i class="iconfont icon-chakangengduo"></i> </em>
        </div>
        <v-plain-table
                :operation="false"
                :pagination="false"
                :data="item"/>
    </div>
    <!-- <v-title title="交易排名"> 
      <span class="opera">查看排行榜 <i class="iconfont icon-chakangengduo"></i></span>
    </v-title>
    <v-plain-table
      :operation="false"
      :pagination="false"
      :data="tableData"/> -->
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from './title.vue'
  import vPlainTable from '@/components/plain-table'

  @Component({
    components: {
      vTitle,
      vPlainTable
    }
  })
  export default class Order extends Vue {
    @Prop({
      default: () => {}
    }) tableData: TableData
  }
</script>

<style lang="less" scoped>
  .opera {
    font-size: 14px;
    cursor: pointer;
  }
  .pd-10{
    margin-top: 10px;
  }
  .top {
      line-height: 28px;
      display: flex;
      justify-content: space-between;
      span {
        color: #4E93FF;
        font-size: 20px;
        border-bottom: 1px solid #4e93ff;
      }
      em {
        font-size: 14px;
        color: #999;
        cursor: pointer;
      }
    }
</style>
